<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        code,
        pre {
            background-color: #f4f4f4;
        }

        pre {
            border-left: 6px solid #005282;
            font-size: 1rem;
            line-height: 1.4;
            margin: 0 0 24px;
            max-width: 100%;
            overflow: auto;
            padding: 24px 0 0;
            width: 100%;
        }

        .e1::first-letter {
            color: red;
            font-size: 130%;
        }

        .e2::first-line {
            color: blue;
        }

        .e3::selection {
            color: red;
            background-color: bisque;
        }

        .e4 h1::before {
            content: 'Chapter';
        }

        .e4 p:before {
            content: open-quote;
        }

        .e4 p:after {
            content: close-quote;
        }
        .e4 a::before{ content: url(http://www.mozilla.org/favicon.ico) "Mozilla"}
    </style>
</head>

<body>
    <h3><code>::first-letter</code>,匹配块级元素第一行的第一个字母。</h3>
    <p class="e1">我是一个段落
        仆以投人找洪下找罚太治慧才就是的，当后种，绪收雷帝妙头说是无非，争死婵论他他，一完日蒲孔在人志锐一看他天其，的得地蒲以磊釜文韩竟畴游，秦越皇承变促到秦你等娘仍，有因日狱承事侯不章尺，他馆的人即许尚不老生即韩，六她三不没谭惜是兴在久快禀极，他出天仑系以面办，找快病人自仁书什导，未降王服幕者商家国至可的友定，圣家地答我纯负上什瞠，贼动井往也，在有赏收人又守洪资但洪了是王，放司小洪德，孔重也杨范欲临。
    </p>
    <p class="e1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste eum natus laborum incidunt illum similique voluptatibus doloribus minima aliquid. Officia debitis modi eius, quaerat culpa eum ab quod, quia libero voluptates natus, odio nobis. Inventore, mollitia? Iste assumenda eos tenetur aliquid nisi modi? Nisi animi pariatur recusandae aliquid sit quia!</p>

    <br>

    <h3><code>::first-line</code>,匹配块级元素第一行的内容</h3>
    <p class="e2">我是一个段落
        仆以投人找洪下找罚太治慧才就是的，当后种，绪收雷帝妙头说是无非，争死婵论他他，一完日蒲孔在人志锐一看他天其，的得地蒲以磊釜文韩竟畴游，秦越皇承变促到秦你等娘仍，有因日狱承事侯不章尺，他馆的人即许尚不老生即韩，六她三不没谭惜是兴在久快禀极，他出天仑系以面办，找快病人自仁书什导，未降王服幕者商家国至可的友定，圣家地答我纯负上什瞠，贼动井往也，在有赏收人又守洪资但洪了是王，放司小洪德，孔重也杨范欲临。
    </p>

    <br>

    <h3><code>::selection</code>，匹配文档中被用于选中的内容。</h3>
    <p class="e3">同松出你里谋同清斯者非拾责九快目感，非也罪非没范使设不，范极的程密拿，即量胆帝丰见，老词气衣，互谭非德便低，饮是的磊承，貂不关，惶。</p>

    <br>

    <h3><code>::before，::after</code>,通过content属性，设置伪元素展示的内容。</h3>
    <div class="e4">
        <strong>CSS:</strong>
        <pre class="">
    h1::before{ content: 'Chapter';}
    p::before{ content: open-quote;}
    p::after{ content: close-quote;}
    a::before{ content: url(http://www.mozilla.org/favicon.ico) "Mozilla"}
        </pre>
        <h1>4</h1>
        <p>在此乐，他的金畴狱秦慨，叹应别苟十人教不洪留治廿谓越好程爻清千，洪笔使否生对，快是的韩，仄沫使畴书重竟论用恶第气光，他。</p>
        <a href="#">主页</a>
    </div>
    <br>

</body>

</html>